<!--
 * @Author: your name
 * @Date: 2020-12-08 13:32:28
 * @LastEditTime: 2021-05-20 11:14:00
 * @LastEditors: Please set LastEditors
 * @Description: 登录
 * @FilePath: /medicine-web/src/views/login.vue
-->
<template>
  <div class="login-container">
    <div class="login-container__outter">
      <div class="login-container__left">
        <p class="login-container__text">登录</p>
        <div class="login-container__liner"></div>
        <div class="login-container__slog">
          <p>欢迎来到</p>
          <p>安柯瑞溶瘤病毒系统</p>
          <p>已建立标准信息库</p>
          <p>随时可获取溶瘤病毒最新进展</p>
        </div>
      </div>
      <div class="login-container__right">
        <div class="login">
          <div class="login-logo" title="跳转至首页" @click.stop="linkToMain">
            <img :src="require('@/assets/image/logo.png')" alt="">
          </div>
          <div class="login-input">
            <a-row>
              <a-col :span="24" style="height: 5.2rem">
                <customInput @handleEnter="handleLogin" v-model="username" :placeholderStr="'请输入账号'" :isError="usernameError ? true: false"></customInput>
              </a-col>
            </a-row>
            <div class="error-tips">
              {{usernameError}}
            </div>
            <a-row>
              <a-col :span="24" style="margin-top: 5%; height: 5.2rem;">
                <customInput @handleEnter="handleLogin" :typeStr="showAndHidePwd ? 'password' : 'text'" v-model="password" :placeholderStr="'请输入密码'" :isError="passwordError ? true: false">
                  <img slot="iconSuffix" :src="require('@/assets/image/password_eye.png')" alt="" class="icon-eye" @click.stop="showHidePwd" v-show="!showAndHidePwd">
                  <img slot="iconSuffix" :src="require('@/assets/image/password_eye_close.png')" alt="" class="icon-eye" @click.stop="showHidePwd" v-show="showAndHidePwd">
                </customInput>
              </a-col>
            </a-row>
            <div class="error-tips">
              {{passwordError}}
            </div>
          </div>
          <a-row style="margin-top: 18%">
            <a-col :span="24" style="height: 5rem">
              <customBtn :btnStr="'登录'" @handClick="handleLogin"></customBtn>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const md5 = require('md5')
import customInput from '@/components/CustomInput/index.vue'
import customBtn from '@/components/CustomBtn/index.vue'
import { LOGIN_TIME_OUT } from '@/utils/dict.js'
export default {
  name: 'Login',
  components: { customInput, customBtn },
  data() {
    return {
      username: '',
      password: '',
      showAndHidePwd: true,
      usernameError: '',
      passwordError: '',
      tOut: LOGIN_TIME_OUT // 15分钟
    }
  },
  created() {
  },
  watch: {
    username: function (val, old) {
      if (val) {
        this.usernameError = ''
      } else {
        this.usernameError = '账号不能为空'
      }
    },
    password: function (val, old) {
      if (val) {
        this.passwordError = ''
      } else {
        this.passwordError = '账号不能为空'
      }
    }
  },
  methods: {
    async handleLogin (e) {
      if (!this.username) {
        this.usernameError = '账号不能为空'
      }
      if (!this.password) {
        this.passwordError = '密码不能为空'
      }
      if (!this.username || !this.password) {
        return
      }
      // this.setCookie('uid', 1)
      // this.$router.push('/')
      const res = await this.$action('Login', { username: this.username, password: md5(this.password) })
      console.log('User Login', res)
      if (res.code === 200) {
        this.msgSuccess(res.msg)
        this.setCookie('uid', res.data.user_id)
        this.setCookie('token', res.data.token)
        this.setCookie('name', res.data.name)
        this.$router.push('/')
        this.setLocalStorage('tOut', this.tOut)
      } else {
        this.msgError('账号或密码错误')
      }
    },
    showHidePwd () { // 显示和隐藏密码
      this.showAndHidePwd = !this.showAndHidePwd
    },
    linkToMain () { // 跳转至首页
      this.$router.push('/')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
.login-container {
  background-image: url('./../assets/image/login_bg.png');
  background-size: 105% 105%;
  background-repeat: no-repeat;
  background-position: -10px -10px;
  // scale: 1.1;
  padding: 4.5rem 0px;
  height: 100%;
  .login-container__outter {
    height: 100%;
    @include flex-def;
    @include flex-cCenter;
    .login-container__left {
      width: 60%;
      height: 100%;
      // background-color: red;
      padding-left: 30%;
      .login-container__text {
        margin: 20% 0;
        font-size: 2.8rem;
        color: #fff;
        @include flex-def;
        @include flex-cCenter;
      }
      .login-container__text::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #fff;
        margin-left: 30px;
      }
      .login-container__liner {
        height: 0.625rem;
        width: 3rem;
        background-color: #fff;
      }
      .login-container__slog {
        margin-top: 8%;
        font-size: 2rem;
        color: #fff;
      }
    }
    .login-container__right {
      width: 40%;
      height: 100%;
      .login {
        width: 85%;
        padding: 10%;
        background-color: #fff;
        height: 100%;
        .login-logo {
          text-align: center;
          cursor: pointer;
          img {
            width: 56%;
          }
        }
        .login-input {
          margin-top: 14%;
          .icon-eye {
            width: 3.125rem; 
            height: 3.125rem;
            cursor: pointer;
          }
          .error-tips {
            color: #f5222d;
            height: 20px;
            font-size: 16px;
            padding: 4px;
          }
        }
      }
    }
  }
}
</style>